<template>
  <div :class="{'app-container': !isDialog}">
    <el-form inline label-width="70px" size="small" class="query-form" v-if="!isDialog">
      <el-form-item label="服务名">
        <el-input clearable v-model="listQuery.appName" />
      </el-form-item>
      <el-form-item label="方法名">
        <el-input clearable v-model="listQuery.methodName" />
      </el-form-item>
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="listQuery.startTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="listQuery.endTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="耗时(ms)" class="form-item2-size">
        <el-col :span="11">
          <input-number clearable v-model="listQuery.durationStartTime"></input-number>
        </el-col>
        <el-col :span="2" style="text-align: center">-</el-col>
        <el-col :span="11">
          <input-number clearable v-model="listQuery.durationEndTime"></input-number>
        </el-col>
      </el-form-item>
      <el-form-item label="限制数">
        <input-number clearable v-model="listQuery.limitNum"></input-number>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" size="small" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <dynamic-table
      ref="table"
      v-loading="listLoading"
      size="small"
      :data="list"
      border
      fit
      style="width: 100%;"
      :columns="columns"
      :page-options='pageOptions'
      :load-method='getTableData'
      :span-method='objectSpanMethod'
    ></dynamic-table>
  </div>
</template>
<script>
import DynamicTable from '@/components/DynamicTable'
import InputNumber from '@/components/form/InputNumber'
import {getSqlLogList} from '@/api/log-trace'
import clipboard from '@/utils/clipboard'
export default {
  name: 'Sql',
  components: { DynamicTable, InputNumber },
  props: {
    query: {
      type: Object,
      default() {
        return {
          traceId: ''
        }
      }
    },
    isDialog: Boolean
  },
  data() {
    return {
      listQuery: {
        appName: '', // 服务名
        startTime: '', // 开始时间
        endTime: '',
        limitNum: '', // 限制次数
        methodName: '', // 方法名
        durationStartTime: '', // 耗时
        durationEndTime: ''
      },
      list: [],
      listLoading: false,
      pageOptions: {
        isShowPage: true
      },
      columns: [[
        {
          prop: 'appName',
          headerAlign: 'center',
          label: '服务',
          width: '120'
        },
        {
          prop: 'method',
          label: '方法全路径',
          width: '120'
        },
        {
          prop: 'occurTime',
          label: '时间',
          width: '160'
        },
        {
          prop: 'sql',
          label: 'SQL语句',
          minWidth: '200'
        },
        {
          prop: 'duration',
          label: '耗时(ms)',
          align: 'center',
          width: '70'
        },
        {
          prop: '',
          label: '操作',
          width: 120,
          align: 'center',
          body(scope) {
            return {
              component: 'TypeButton',
              bind: {
                type: 'text',
                size: 'small',
                name: '复制sql'
              },
              on: {
                click(evt) {
                  clipboard(scope.row.sql || ' ', evt)
                }
              }
            }
          }
        }
      ]]
    }
  },
  mounted() {
    if (this.$route.query.traceId) {
      this.listQuery.traceId = this.$route.query.traceId
      this.queryTableData()
    } else if (this.isDialog) {
      this.listQuery.traceId = this.query.traceId
      this.queryTableData()
    }
  },
  methods: {
    async getTableData(param) {
      let params = {
        ...this.listQuery,
        pageNum: param.currentPage,
        pageSize: param.pageSize
      }
      try {
        let {data} = await getSqlLogList(params) || {}
        let list = data.list
        let arr = []
        // 数据扁平化
        if (list) {
          list.forEach(el => {
            let obj = {...el}
            delete obj.sqlLogList
            el.sqlLogList.forEach((item, index) => {
              let temp = {...obj, ...item}
              if (index === 0) {
                temp.rowspan = el.sqlLogList.length
              }
              arr.push(temp)
            })
          })
        }
        this.list = arr
        return data
      } catch (e) {
        throw e
      }
    },
    search() {
      this.listQuery.traceId = ''
      this.queryTableData()
    },
    queryTableData() {
      this.$refs.table.queryPageData()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex < 1) {
        if (row.rowspan) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.form-item2-size /deep/{
  .el-form-item__content {
    width: 190px;
  }
  .el-input {
    width: 100%;
  }
}
</style>
